<!-- 地图 -->
<template>
  <div class="page-box h100 display-flex czbj pr">

    <div id="container" class="map" tabindex="0"></div>
    <div class="kxzczfsdrfsdf">
      <p class="red cen pm10 fz18">拖拽地图中的小图标选择位置</p>
      <div class=" display-flex">
        <div class=" vertical-center">
          地址：
        </div>
        <div class=" flex-1">
          <el-input v-model="dikjxzx" type="textarea" placeholder="" size="medium" clearable></el-input>

        </div>
      </div>
      <div class=" display-flex mt10">
        <div class=" ">
          坐标：
        </div>
        <div class=" flex-1">
          {{ zb }}
        </div>
      </div>
      <div class="mt10 cen">
        <el-button type="primary" size="medium" @click="success">确认</el-button>
        <el-button type="error" size="medium" @click="closert" class="ml10">关闭</el-button>
      </div>
    </div>
  </div>
</template>
<script lang='ts' setup>
import { nextTick, ref, defineEmits } from "vue";
const dikjxzx = ref()
const zb = ref()
const emit = defineEmits([
  'close',
  'success'
]);
const closert = () => {

  emit("close")
}
const success = ()=>{
  emit("success",{
    dikjxzx:dikjxzx.value,
    zb:zb.value
  })
}


nextTick(() => {
  AMapUI.loadUI(['misc/PositionPicker', 'control/BasicControl'], function (PositionPicker, BasicControl) {
    var map = new AMap.Map('container', {
      zoom: 16,
      
    })
    var positionPicker = new PositionPicker({
      mode: 'dragMarker',
      map: map,
      iconStyle: { //自定义外观
        url: '//webapi.amap.com/ui/1.0/assets/position-picker2.png',
        ancher: [24, 40],
        size: [48, 48]
      }
    });
    console.log(positionPicker);

    positionPicker.on('success', function (positionResult) {
      console.log(positionResult);
      dikjxzx.value = positionResult.address
      zb.value = positionResult.position.lng + "," + positionResult.position.lat
    })
    positionPicker.start();

    //添加一个缩放控件
    map.addControl(new BasicControl.Zoom({
      position: 'rt'
    }));
  });
});

</script>
<style>
#container {

  width: 100%;
  height: 100%;
  margin: 0px;
  font-size: 13px;
}
</style>
<style scoped>
.lxcxfrerer {
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 100;
  width: 400px;
}

.kxzczfsdrfsdf {
  position: absolute;
  left: 0px;
  top: 10px;
  right: 0;
  margin: auto;
  width: 400px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.8);
  z-index: 100;
}
</style>